<template>
  <div style="width: 100%;min-height: 100vh; position: absolute; top: 0; left: 0;">

    <!-- 导航 -->
    <div style="position: fixed; height: 100%; width: 200px; background-color: rgb(84,92,100)">
      <div style="color: aliceblue; text-align: center; font-weight: bold; font-size: 20px; margin-top: 20px;">人力资源管理系统</div>

      <div>
        <el-row style="margin-top: 30px;">
          <el-col>
            <el-menu default-active="2" class="el-menu-vertical-demo" background-color=rgb(84,92,100) text-color="#fff"
              active-text-color="#fff" style="width: 201px;">

              <el-menu-item index="1" @click="$router.push('/manager/index')">
                <span slot="title" >首页</span>
              </el-menu-item>


              <el-sub-menu index="2">

                <template #title>
                  <span>管理</span>
                </template>
                <!-- <el-menu-item-group> -->
                  <el-menu-item index="2-1" @click="$router.push('/manager/departmanager')">部门管理</el-menu-item>
                  <el-menu-item index="2-2" @click="$router.push('/manager/positionmanager')">岗位管理</el-menu-item>
                  <el-menu-item index="2-3" @click="$router.push('/manager/personmanager')">人员管理</el-menu-item>
                <!-- </el-menu-item-group> -->
              </el-sub-menu>

              <el-sub-menu index="3">

                <template #title>
                  <span>薪资</span>
                </template>
                <!-- <el-menu-item-group> -->
                  <el-menu-item index="3-1" @click="$router.push('/manager/salarymanager')">薪资管理</el-menu-item>
                <!-- </el-menu-item-group> -->
              </el-sub-menu>

            </el-menu>
          </el-col>
        </el-row>
      </div>

    </div>


    <!-- 内容 -->
    <div style="padding-left: 200px;">
      <router-view />
    </div>

  </div>
</template>

<script setup>


</script>

<style>
html,
body {
  height: 100%;
  margin: 0;
  padding: 0;
}

div {
  overflow: hidden;
}
</style>
